import React from "react";
import {inject, observer} from "mobx-react";
import {Route, withRouter} from "react-router-dom";
import {Icon, Popover, Tools} from "weaver-mobile";
import {ListViewPage, RouteLayout} from "weaver-mobile-page";
import Condition from "./condition";
import {openHrmCard} from "../../../util";
import {WrListCard, WrListCardOperate, WrMenu, WrPicker, WrShow, WrAlertPage} from "../../../public";
import AccessView from "../accessView";

const getLabel = Tools.getLabel;
const statusValue = {
    "": "",
    "0": {label: getLabel(508778, "考核中"), color: "#EAA81C"},
    "1": {label: getLabel(19134, "审批中"), color: "#868686"},
    "2": {label: getLabel(236, "退回"), color: "#B916E8"},
    "3": {label: getLabel(23774, "已完成"), color: "#49D732"},
    "4": {label: getLabel(1979, "未开始"), color: "#CACACA"},
    "5": {label: getLabel(382750, "已过期"), color: "#000000"},
    "7": {label: getLabel(508873, "无数据"), color: "#686868"},
    "8": {label: getLabel(15808, "未设置"), color: "#D81D19"},
    "9": {label: getLabel(504627, "无权限"), color: "#000000"},
}

/**
 * 考核成绩
 * jiansong 2019/11/8
 */
@inject("accessResultStore")
@withRouter
@observer
export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.store = this.props.accessResultStore;
    }

    componentDidMount() {
        this.store.doInit();
    }

    render() {
        const {list, getTableDatas, queryParams, stabList, type, hasInit, onSearchChange, updateListData} = this.store;
        return (
            <div className="workrelate-performance-accessResult workrelate-listCard-reset workrelate-roll">
                <WrAlertPage show={hasInit && stabList && stabList.length == 0} msg={getLabel(508557, "暂未开启任何考核周期")}/>
                <WrShow show={hasInit && stabList && stabList.length > 0}>
                    <div className="accessResult-header">
                        <Popover
                            placement="bottomLeft"
                            onSelect={this.onSelect}
                            visible={false}
                            mask={true}
                            overlay={
                                <div className="workrelate-header-item">
                                    {stabList.map(item => <Popover.Item key={item.key}><span
                                        className="workrelate-header-item-cycle">{item.title}</span></Popover.Item>)}
                                </div>
                            }>
                        <span className="accessResult-header-type">
                            <span>{type}</span>
                            <Icon size="xs" type="down"/>
                        </span>
                        </Popover>
                        <WrPicker
                            minyear={2013}
                            maxyear={new Date().getFullYear() + 1}
                            type={queryParams.type1}
                            initval={[queryParams.year, queryParams.type2]}
                            onChange={val => {
                                onSearchChange({year: val[0], type2: val[1]});
                                getTableDatas();
                            }}
                        />
                        <span>
                        <Icon type="filter-o" size="xs" onClick={() => {
                            this.props.history.push("/performance/accessResult/condition")
                        }}/>
                    </span>
                    </div>
                    <ListViewPage.Normal
                        store={list}
                        heightSpace={window.getThemeVars ? window.getThemeVars()["hd"] * 49 : 52}
                        getTemplate={this.getTemplate}
                        renderSeparator={(section, index) => <WrListCardOperate key={index}/>}
                        onRowClick={data => this.handleRowClick(data)}
                    />
                </WrShow>

                <WrMenu
                    data={this.props.menu}
                    onSelect={val => this.props.history.push(val.props.path)}/>
                <Route
                    key="accessResult-condition"
                    path="/performance/accessResult/condition"
                    breadcrumbName="考核成绩-高级搜索条件"
                    render={() => (
                        <RouteLayout>
                            <Condition key="route-accessResult"/>
                        </RouteLayout>
                    )}
                />
                <Route key="accessResult-accessView"
                       breadcrumbName="评分详情"
                       path="/performance/accessResult/accessView"
                       render={() =>
                           <RouteLayout>
                               <div className="wm-route-layout" key="route-accessResult-accessView">
                                   <AccessView menu={this.props.menu} updateListData={updateListData}/>
                               </div>
                           </RouteLayout>
                       }
                />
            </div>
        )
    }

    //行点击
    handleRowClick = (data) => {
        const {queryParams} = this.store;
        if (data.scoreid) {
            this.props.history.push("/performance/accessResult/accessView?scoreid=" + data.scoreid)
        } else {
            if (queryParams.type1 == 1 || queryParams.type1 == 2) {
                this.props.history.push("/performance/accessResult/accessView?resourceid=" + data.hrmid + "&year=" + queryParams.year + "&type1=" + queryParams.type1 + "&type2=" + queryParams.type2)
            } else {
                this.props.history.push("/performance/accessResult/accessView?resourceid=" + data.hrmid + "&year=" + queryParams.year + "&type1=" + queryParams.type1)
            }
        }
    }

    //类型选中
    onSelect = (val) => {
        const {onSearchChange, getTableDatas} = this.store;
        let type;
        if (val == "3" || val == "4") {
            type = "";
        } else if (val == "1") {
            type = this.store.nowmonth;
        } else if (val == "2") {
            type = this.store.nowseason;
        }
        onSearchChange({type1: val.key, type2: type})
        getTableDatas();
    }

    //获取数据模板
    getTemplate = (template) => {
        return {
            default: [{
                key: "col_1",
                render: data => <WrListCard data={[
                    {
                        label: getLabel(30042, "人员"),
                        value: (<span style={{color: "#4D7AD8"}} onClick={(e) => openHrmCard(data.hrmid, e)}>
                            {data.hrmidspan}
                        </span>)
                    },
                    {label: getLabel(33553, "分部"), value: data.subcompanyid1span},
                    {label: getLabel(27511, "部门"), value: data.departmentidspan},
                    {label: getLabel(17506, "得分"), value: data.resultspan},
                    {label: getLabel(23247, "状态"), value: this.getStatus(data.s_statusspan)},
                ]}/>
            }]
        }
    }

    //获取方案状态
    getStatus = (val) => {
        let value = statusValue[val];
        return <span className="workrelate-status" style={{background: value.color}}>{value.label}</span>
    }

}

